<!-- 500服务器错误页面组件 - 处理服务器内部错误 -->
<template>
    <!-- 500错误页面容器 -->
    <div class="server-error-page">
        <!-- 错误内容容器 -->
        <div class="error-content">
            <!-- 500图标区域 -->
            <div class="error-icon">
                <el-icon>
                    <Warning />
                </el-icon>
            </div>

            <!-- 错误标题 -->
            <h1 class="error-title">500</h1>

            <!-- 错误副标题 -->
            <h2 class="error-subtitle">服务器内部错误</h2>

            <!-- 错误描述 -->
            <p class="error-description">
                抱歉，服务器遇到了一个内部错误。
                <br>
                我们的技术团队已经收到通知，正在努力修复这个问题。
            </p>

            <!-- 错误详情（开发环境显示） -->
            <div v-if="isDevelopment && errorDetails" class="error-details">
                <details>
                    <summary>错误详情</summary>
                    <pre class="error-stack">{{ errorDetails }}</pre>
                </details>
            </div>

            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <!-- 重新加载按钮 -->
                <el-button type="primary" @click="reloadPage" class="reload-btn">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重新加载
                </el-button>

                <!-- 返回首页按钮 -->
                <el-button @click="goHome" class="home-btn">
                    <el-icon>
                        <House />
                    </el-icon>
                    返回首页
                </el-button>

                <!-- 联系支持按钮 -->
                <el-button @click="contactSupport" class="support-btn">
                    <el-icon>
                        <Message />
                    </el-icon>
                    联系支持
                </el-button>
            </div>

            <!-- 状态信息区域 -->
            <div class="status-info">
                <p class="status-text">
                    <el-icon>
                        <Clock />
                    </el-icon>
                    预计修复时间: {{ estimatedFixTime }}
                </p>
                <p class="status-text">
                    <el-icon>
                        <Bell />
                    </el-icon>
                    我们会通过邮件通知您修复状态
                </p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理和生命周期管理
 */
import { ref, computed, onMounted } from 'vue'

/**
 * 导入Vue Router
 * @description 用于页面导航和路由信息获取
 */
import { useRouter, useRoute } from 'vue-router'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import {
    Warning,
    Refresh,
    House,
    Message,
    Clock,
    Bell
} from '@element-plus/icons-vue'

// ==================== 响应式数据 ====================

/**
 * 错误详情信息
 * @description 存储服务器错误的具体信息
 */
const errorDetails = ref<string>('')

/**
 * 开发环境标识
 * @description 用于控制是否显示详细错误信息
 */
const isDevelopment = import.meta.env.DEV

/**
 * 预计修复时间
 * @description 显示给用户的预计修复时间
 */
const estimatedFixTime = ref<string>('30分钟内')

// ==================== 计算属性 ====================

/**
 * 获取当前时间
 * @description 用于计算预计修复时间
 */
const currentTime = computed(() => {
    const now = new Date()
    const hours = now.getHours()
    const minutes = now.getMinutes()

    // 计算30分钟后的时间
    const estimatedTime = new Date(now.getTime() + 30 * 60 * 1000)
    const estimatedHours = estimatedTime.getHours()
    const estimatedMinutes = estimatedTime.getMinutes()

    return `${estimatedHours.toString().padStart(2, '0')}:${estimatedMinutes.toString().padStart(2, '0')}`
})

// ==================== 获取实例 ====================

/**
 * 获取路由实例
 * @description 用于页面导航操作
 */
const router = useRouter()

/**
 * 获取当前路由实例
 * @description 用于获取当前路由信息
 */
const route = useRoute()

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载后的处理
 * @description 记录500错误信息和设置页面标题
 */
onMounted(() => {
    // 设置页面标题
    document.title = '500 - 服务器内部错误'

    // 更新预计修复时间
    estimatedFixTime.value = `今天 ${currentTime.value}`

    // 记录500错误信息
    console.error('500服务器错误:', {
        path: route.path,
        fullPath: route.fullPath,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent,
        referrer: document.referrer
    })

    // 模拟获取错误详情（实际项目中可能从路由参数或全局状态获取）
    if (isDevelopment) {
        errorDetails.value = `
错误类型: 服务器内部错误
错误代码: 500
请求路径: ${route.path}
时间戳: ${new Date().toISOString()}
用户代理: ${navigator.userAgent}
来源页面: ${document.referrer || '直接访问'}
    `.trim()
    }

    // 可以发送错误到监控服务
    // sendErrorToMonitoring({
    //   type: '500',
    //   path: route.path,
    //   timestamp: new Date().toISOString(),
    //   error: errorDetails.value
    // })
})

// ==================== 交互方法 ====================

/**
 * 重新加载页面
 * @description 刷新当前页面以尝试恢复
 */
const reloadPage = () => {
    window.location.reload()
}

/**
 * 返回首页
 * @description 导航到网站首页
 */
const goHome = () => {
    router.push('/')
}

/**
 * 联系技术支持
 * @description 跳转到联系页面或显示联系方式
 */
const contactSupport = () => {
    // 跳转到联系页面
    router.push('/contact')

    // 或者可以显示一个对话框
    // ElMessageBox.alert(
    //   '请通过以下方式联系我们：\n\n邮箱: support@example.com\n电话: 400-123-4567',
    //   '联系技术支持',
    //   {
    //     confirmButtonText: '确定',
    //     type: 'info'
    //   }
    // )
}
</script>

<style scoped lang="scss">
// 导入500错误页面样式
@use '../../assets/styles/components/errors/_server-error';
</style>
